<template>
  <div class="homeborder">
    <div class="search-contents">
      <div class="search-input">
        <div class="title">用户名</div>
        <a-input
          v-model:value="username"
          style="width: 900px"
          class="a-inp"
          placeholder="请输入用户名"
        />
      </div>
      <div class="search-btn">
        <a-button type="primary" ghost class="search-btn-item">搜索</a-button>
        <a-button class="search-btn-item">重置</a-button>
      </div>
    </div>
    <div class="tcontents">
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="{ pageSize: 6 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a-button type="primary" @click="showModal(record)">编辑</a-button>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model:open="open"
      title="编辑用户信息"
      okText="确定"
      cancelText="取消"
      @ok="handleOk"
    >
      <div class="search-input-update">
        <div class="title">用户名</div>
        <a-input
          v-model:value="userInfo.username"
          class="a-inp"
          placeholder="请输入用户名"
        />
      </div>
      <div class="search-input-update">
        <div class="title">角色</div>
        <a-input
          v-model:value="userInfo.role"
          class="a-inp"
          placeholder="请输入角色"
        />
      </div>
      <div class="search-input-update">
        <div class="title">用户密码</div>
        <a-input
          v-model:value="userInfo.userpassword"
          class="a-inp"
          placeholder="请输入用户密码"
        />
      </div>
      <div class="search-input-update">
        <div class="title">创建时间</div>
        <a-input
          v-model:value="userInfo.fondtime"
          class="a-inp"
          placeholder="请输入创建时间"
        />
      </div>
      <div class="search-input-update">
        <div class="title">修改时间</div>
        <a-input
          v-model:value="userInfo.modifytime"
          class="a-inp"
          placeholder="请输入修改时间"
        />
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
const userInfo = reactive({
  username: "",
  role: "",
  userpassword: "",
  fondtime: "",
  modifytime: "",
});
import { useRouter } from "vue-router"; // 引入 useRouter
const username = ref("");
//编辑弹窗
const open = ref(false);
const showModal = (record) => {
  open.value = true;
  Object.assign(userInfo, record);
  //  userInfo.username = record.username;
  // userInfo.role = record.role;
  // userInfo.userpassword = record.userpassword;
  // userInfo.fondtime = record.fondtime;
  // userInfo.modifytime = record.modifytime;
  console.log("Editing user:", record);
  // 在这里你可以处理编辑逻辑，比如打开一个编辑对话框或路由到编辑页面
};
const handleOk = (e) => {
  console.log(e);
  open.value = false;
};
const columns = [
  {
    title: "用户名",
    dataIndex: "username",
  },
  {
    title: "角色",
    dataIndex: "role",
  },

  {
    title: "用户密码",
    dataIndex: "userpassword",
  },
  {
    title: "创建时间",
    dataIndex: "fondtime",
  },
  {
    title: "修改时间",
    dataIndex: "modifytime",
  },
  {
    title: "操作",
    dataIndex: "operation",
    fixed: "right",
    width: 200,
  },
];
const data = [
  {
    key: 1,
    username: "cf",
    role: "管理员",
    userpassword: "123456",
    fondtime: "2023-12-03 11:09:09",
    modifytime: "2023-12-03 11:09:09",
  },
  {
    key: 2,
    username: "成都",
    role: "管理员",
    userpassword: "123456",
    fondtime: "2023-12-03 11:09:09",
    modifytime: "2023-12-03 11:09:09",
  },
  {
    key: 3,
    username: "王超",
    role: "管理员",
    userpassword: "123456",
    fondtime: "2023-12-03 11:09:09",
    modifytime: "2023-12-03 11:09:09",
  },
  {
    key: 4,
    username: "罗金蓉",
    role: "管理员",
    userpassword: "123456",
    fondtime: "2023-12-03 11:09:09",
    modifytime: "2023-12-03 11:09:09",
  },
  {
    key: 5,
    username: "王超",
    role: "管理员",
    userpassword: "123456",
    fondtime: "2023-12-03 11:09:09",
    modifytime: "2023-12-03 11:09:09",
  },
  {
    key: 6,
    username: "李策",
    role: "管理员",
    userpassword: "123456",
    fondtime: "2023-12-03 11:09:09",
    modifytime: "2023-12-03 11:09:09",
  },
  {
    key: 7,
    username: "王超",
    role: "管理员",
    userpassword: "123456",
    fondtime: "2023-12-03 11:09:09",
    modifytime: "2023-12-03 11:09:09",
  },
  {
    key: 8,
    username: "曾琴",
    role: "管理员",
    userpassword: "123456",
    fondtime: "2023-12-03 11:09:09",
    modifytime: "2023-12-03 11:09:09",
  },
];
</script>
<style scoped>
.homeborder {
  width: 95%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  margin-left: 1%;
}
.tcontents {
  width: 86%;
}
.add-btn {
  margin: 10px 0;
}
.title {
  width: 100px;
  height: 35px;
  line-height: 25px;
  text-align: center;
  border: 1px solid #d9d9d9;
  background-color: #f8fafb;
  padding: 5px;
}
.a-inp {
  border-radius: 3px;
}
.search-btn {
  display: flex;
  margin-left: 26px;
}
.search-btn-item {
  margin: 0 5px;
}
.search-contents {
  display: flex;
  margin: 20px 0;
}
.search-input {
  height: 35px;
  display: flex;
}
.search-input-update {
  height: 35px;
  margin: 20px;
  display: flex;
}
</style>
